<template>
  <div class="index">

    <el-row :gutter="20">

      <el-col :span="24">
        <div class="block">
          <el-select v-model="model" placeholder="请选择" @change="getMarkStatData">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.model_name "
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="chart">
          <pie-chart :PieData="PieData" />
        </div>
      </el-col>



      <el-col :span="24" style="margin-top: 20px;">
        <div class="screen">
          <div style="margin-right: 10px" >
            <el-date-picker
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              @change="getMarkModelChartData"
              v-model="lineTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <el-select v-model="lineModel" placeholder="请选择" @change="getMarkModelChartData">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.model_name"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="chart">

          <line-chart :LineData="LineData" :LineDataTimeList="LineDataTimeList"/>


        </div>
      </el-col>


    </el-row>
  </div>
</template>

<script>

import PieChart from './components/PieChart.vue'
import LineChart from './components/lineChart.vue'
import { getMarkStat, getMarkModelChart } from '@/api/dashboard'

export default {
  components: { PieChart, LineChart },
  data(){
    return{
      options:[
        {
          model_name:'重要新闻',
          value:'1'
        },
        {
          model_name:'情感分析',
          value:'2'
        },
        {
          model_name:'广告识别',
          value:'3'
        },
        {
          model_name:'新闻正负面',
          value:'4'
        },
      ],
      model: '1',
      PieData:[],

      lineTime:[],
      options2:[
        {
          model_name:'重要新闻',
          value:'1'
        },
        {
          model_name:'情感分析',
          value:'2'
        },
        {
          model_name:'广告识别',
          value:'3'
        },
        {
          model_name:'新闻正负面',
          value:'4'
        },
      ],
      lineModel:'1',
      LineData:[],
      LineDataTimeList:[]
    }
  },
  created(){
    this.fun_date()
    this.getMarkStatData()
    this.getMarkModelChartData()

  },
  methods:{
    fun_date(){
     var date1 = new Date(),
     time1=date1.getFullYear()+"-"+(date1.getMonth() + 1 < 10 ? "0" + (date1.getMonth() + 1) : date1.getMonth() + 1)+"-"+(date1.getDate() < 10 ? "0" + date1.getDate() : date1.getDate());//time1表示当前时间
      console.log(time1,21212121)
      this.lineTime[1]=time1
     var date2 = new Date(date1);
     date2.setDate(date1.getDate()-7);
     var time2 = date2.getFullYear()+"-"+(date2.getMonth() + 1 < 10 ? "0" + (date2.getMonth() + 1) : date2.getMonth() + 1)+"-"+(date2.getDate() < 10 ? "0" + date2.getDate() : date2.getDate());
      // this.lineTime.unshift(time2)
      this.lineTime[0]=time2
     console.log(time2,23232323)
      console.log(this.lineTime,242424)
},
    async getMarkStatData(){
      console.log(this.model,16164646)
      const res = await getMarkStat( {model_name:this.model})
      this.PieData=res.data
    },
    async getMarkModelChartData(){

      console.log(this.lineTime,1111)

      const res = await getMarkModelChart( {
        model_name:this.lineModel,
        pre_time:this.lineTime[0],
        post_time:this.lineTime[1]
      })
      console.log(res,222222222)
      this.LineData=res.data.data
      this.LineDataTimeList=res.data.date_time_list
      // console.log(this.LineData,11111)
      console.log(this.LineDataTimeList,222222222)
    }
  },
}
</script>

<style lang="scss">
 .chart{
   background-color: #fff;
 }
 .box{
   background: RGB(250,250,250);
 }
  .block{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }
  .screen{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: flex-end;
  }
</style>
